
const pcc = {
    '陕西省': {
        '西安市': [ '未央区' , '灞桥区' , '雁塔区', '碑林区' , '长安区' ],
        '咸阳市': [ '秦都区' , '渭城区' , '杨陵区' , '三原县' , '乾县' ] 
     } ,
    '山西省': {
        '太原市': [ '小店区' , '迎泽区' , '杏花岭区' , '尖草坪区' , '万柏林区' , '晋源区'] 
    },
    '四川省': {
        '成都市': [ '锦江区' , '青羊区' , '金牛区' ] 
    },
    '甘肃省' : {
        '兰州市': [ '城关区' , '七里河区' , '安宁区' , '西固区' , '榆中县' ] ,
        '武威市': [ '凉州区' , '古浪县' , '民勤县' , '天祝藏族自治县' ]   ,
        '庆阳市': [ '西峰区' , '正宁县' , '宁县' , '镇原县' ] 
    }
};

// 先把省份名称设置到 [name=province] 元素中
const province = document.querySelector( '[name=province]' );
const city = document.querySelector( '[name=city]' );
const country = document.querySelector( '[name=country]' );

// 从 pcc 中取得所有属性名称(即所有省份名称)组成的数组
let provinceNames = Object.getOwnPropertyNames( pcc );

// forEach 调用 fn 函数时会为其传入三个参数:
// 第一个参数是当前循环取得的数组元素
// 第二个参数是当前循环所取得元素的索引
// 第三个参数是数组本尊
let fn = function( element , index , array ){
    let option = document.createElement( 'option' );
    option.innerHTML = element ;
    province.appendChild( option );
}

// forEach 是个高阶函数 ( 以函数为参数或返回函数的函数 )
// forEach遍历数组时，每取得一个数组元素都会调用 fn 函数予以处理
provinceNames.forEach( fn );

function remove( select ){
    for( let i = select.options.length - 1 ; i > 0 ; i-- ){
        let op = select.options[ i ];
        select.removeChild( op ) ;
    }
}

let provinceChangeListener = function( e ){
    let t = e.target ; // 获得事件目标(即获得select元素)
    console.log( t );
    // 通过 select 元素的 selectedIndex 可以获得被选中的 option 元素
    let i = t.selectedIndex ;
    // 通过 select 元素的 options 属性可以获得其中所有的 option 组成的集合
    let ops = t.options ; 
    let op = ops[ i ];
    let provinceName = op.innerHTML ;
    console.log( provinceName );
    // 根据 省份名称 获取其相应的城市
    let cities = pcc[ provinceName ];
    let cityNames = Object.getOwnPropertyNames( cities );
    // 首先删除 city 中原有的 option
    remove( city ) ;
    // 将当前省份中所有城市设置到 city 对应的 select 元素中
    cityNames.forEach( cn => {
        let op = document.createElement( 'option' );
        op.innerHTML = cn ;
        city.appendChild( op );
    });
    // city.selectedIndex = 1 ;
}

// 监听 province 元素上的 change 事件
province.addEventListener( 'change' , provinceChangeListener , false );

let cityChangeListener = function( e ){
    let t = e.target ;
    let i = t.selectedIndex ; 
    let ops = t.options ;
    let op = ops[ i ];
    let cityName = op.innerHTML ; // 取得被选中的城市名称
    let provinceName = province.options[ province.selectedIndex ].innerHTML;
    let cities = pcc[ provinceName ] ; // 取得目前被选中的省份中所有城市
    let countries = cities[ cityName ] ; //  根据城市名称获得区/县
    // 首先删除 country 中原有的 option
    remove( country );
    countries.forEach( cn => {
        let op = document.createElement( 'option' );
        op.innerHTML = cn ;
        country.appendChild( op );
    });
}

city.addEventListener( 'change' , cityChangeListener , false );
/*
const provinces = [
    {  
        name: '陕西省' , 
        cities: [ 
            { 
                name: '西安市' , 
                countries: [ { name: '长安' } , { name: '未央' } ] 
            },
            { 
                name: '咸阳市' , 
                countries: [ { name: '秦都区' } , { name: '泾阳县' } ] 
            }
        ]
    }
];
*/